<template>
	<view class="community">
		<view class="head_bg">
			<!-- <view class="community_search">
				<image class="community_search_icon" src="../../../common/img/sousuo.png" mode=""></image>
				<input class="community_search_input" @confirm="confirm" confirm-type="search" @input="getinputvalue" type="text" value="" placeholder="请输入小区名字" />
			</view> -->
			<view class="cu-bar search">
				<view class="search-form bg-white" style="border-radius:50rpx;">
					<text class="cuIcon-search"></text>
					<input type="text" placeholder="" confirm-type="search" @input="getinputvalue"></input>
					 <view @tap="searchShop" class="text-right margin-right-sm text-lg">搜索</view>
				</view>
			</view>
		</view>
		<view class="big_box" v-for="(info,index) in list" :key="index">
			<view class="big_box_inner">
				<view class="big_inner_one" style="border-radius:20rpx 20rpx 0 0 ;">
					<!-- @tap="toDetail(info.residential_quarters_guid)" -->
					<view @tap="toDetail(info.residential_quarters_guid)">
						<view class="community_title_inner">
							<view class="community_title">{{info.residential_quarters_name}}</view>
							<view class="community_time">
							<text style="vertical-align: middle;margin-top:20rpx;">{{info.add_time}}</text>
							<image @click.stop="delCommunity(info.residential_quarters_guid)" src="../../../common/img/delxq.png" style="width:99rpx;height:85rpx;vertical-align: middle"></image>
							</view>
							
						</view>
						<view class="uni_rogress">
							<uniProgress style="margin-left: 30rpx;" :percentage="60" explain="" percentBackground="#007aff"></uniProgress>
						</view>
						<view class="community_count" style="border:none;">
							<view class="community_count_inner">
								<view class="community_count_inner_number">{{info.device_total}}</view>
								<view class="community_count_inner_text">插座个数</view>
							</view>
							<view class="community_count_inner">
								<view class="community_count_inner_number">{{info.device_normal_total}}</view>
								<view class="community_count_inner_text">正常个数</view>
							</view>
							<view class="community_count_inner">
								<view class="community_count_inner_number" >{{info.device_fault_total}}</view>
								<view class="community_count_inner_text">故障个数</view>
							</view>
						</view>
						<view class="community_count">
							<view class="community_count_inner">
								<view class="community_count_inner_number">{{info.device_online_total}}</view>
								<view class="community_count_inner_text">在线个数</view>
							</view>
							<view class="community_count_inner">
								<view class="community_count_inner_number">{{info.device_off_total}}</view>
								<view class="community_count_inner_text">离线个数</view>
							</view>
							<view class="community_count_inner">
								<view class="community_count_inner_number" >{{info.device_user_total}}</view>
								<view class="community_count_inner_text">正在使用</view>
							</view>
						</view>
						<view class="community_gl">
							<view class="community_gl_left">
								<view class="community_gl_left_text">按时功率 &nbsp;&nbsp;&nbsp;≤ <text style="color: #333333;font-size: 32rpx;font-weight: bold;margin-left: 20rpx;">{{info.ontime_max_power}}</text></view>
								<view class="community_gl_left_text" style="margin-top: 10rpx;">按量功率 &nbsp;&nbsp;&nbsp;≤ <text style="color: #333333;font-size: 32rpx;font-weight: bold;margin-left: 20rpx;">{{info.amount_max_power}}</text></view>
							</view>
							<view class="community_gl_left_text">电价:&nbsp;&nbsp;&nbsp;<text style="color: #27B53E;font-size: 36rpx;font-weight: bold;margin-left: 20rpx;margin-right: 20rpx;">{{info.electricity_fees}}</text>元/度</view>
						</view>
					</view>
					<view class="community_address">
						<view class="community_address_left">
							<image class="community_address_iconl" src="../../../common/img/dizhi_hui.png" mode=""></image>
							<view class="community_address_text">{{info.residential_quarters_address}}</view>
						</view>
						<!-- <image class="community_address_iconr" src="../../../common/img/zhankai.png" mode=""></image> -->
						<view class="basis-xs text-center" @tap="showyyinfo(index)">
							<text :class="'cuIcon-' + info.iconname"></text>
						</view>
					</view>
				</view>
				<view class="big_inner_two" v-if="info.isshow">
					<view class="big_inner_two_title">
						<view class="big_inner_two_title_1">运营<text style="color: #52A8FF;font-size: 28rpx;margin: 0 15rpx;">{{info.day}}</text>天</view>
						<view class="big_inner_two_title_1" style="font-weight: normal;font-size: 26rpx;">利润：	<text style="color: #52A8FF;font-size: 26rpx;margin-left: 15rpx;">￥{{info.profit}}</text></view>
					</view>
					<view class="operating_box" style="box-shadow: none;background: #F6FBFF;">
						<view class="operating_box_inner">
							<view class="money_details_inner money_details_inner1">
								<view class="money_details_number" style="color: #333333;">{{info.total}}</view>
								<view class="money_details_text" style="color: #666666;">总收入(元)</view>
							</view>
							<view class="money_details_inner money_details_inner1">
								<view class="money_details_number" style="color: #333333;">{{info.order_income}}</view>
								<view class="money_details_text" style="color: #666666;">订单收入(元)</view>
							</view>
							<view class="money_details_inner money_details_inner1">
								<view class="money_details_number" style="color: #333333;">{{info.hourly_income}}</view>
								<view class="money_details_text" style="color: #666666;">套餐收入(元)</view>
							</view>
						</view>
						<view class="operating_box_inner">
							<view class="money_details_inner money_details_inner1">
								<view class="money_details_number" style="color: #333333;">{{info.order_electricity_fees}}</view>
								<view class="money_details_text" style="color: #666666;">电费预支(元)</view>
							</view>
							<view class="money_details_inner money_details_inner1">
								<view class="money_details_number" style="color: #333333;">{{info.power_consumption}}</view>
								<view class="money_details_text" style="color: #666666;">总耗电量(度)</view>
							</view>
							<view class="money_details_inner money_details_inner1">
								<view class="money_details_number" style="color: #333333;">{{info.input_cost}}</view>
								<view class="money_details_text" style="color: #666666;">投入成本(元)</view>
							</view>
						</view>
						<view class="operating_box_inner" style="justify-content: flex-start;">
							<view class="money_details_inner money_details_inner1">
								<view class="money_details_number" style="color: #333333;">{{info.platform_sharing}}</view>
								<view class="money_details_text" style="color: #666666;">平台分成(元)</view>
							</view>
							<view class="money_details_inner money_details_inner1">
								<view class="money_details_number" style="color: #333333;">{{info.property_sharing}}</view>
								<view class="money_details_text" style="color: #666666;">物业分成(元)</view>
							</view>
							<view class="money_details_inner money_details_inner1">
								<view class="money_details_number" style="color: #333333;">{{info.agency_share}}</view>
								<view class="money_details_text" style="color: #666666;">代理分成(元)</view>
							</view>
						</view>
						<view class="operating_box_inner" style="justify-content: flex-start;">
							<view class="money_details_inner money_details_inner1">
								<view class="money_details_number" style="color: #333333;">{{info.order_num}}</view>
								<view class="money_details_text" style="color: #666666;">总订单(件)</view>
							</view>
						</view>
					</view>
					
					<!-- <view class="community_btn" >
							<view class="community_btn_inner">
								<image class="community_btn_icon" src="../../../common/img/dingdanhui@2x.png" mode=""></image>
								<text class="community_btn_text">统计报表</text>
							</view>
					</view> -->
				</view>
				<view class="operating_box_inner bg-white" style="padding:18rpx;border-radius:0 0 20rpx 20rpx;box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.13);">
					<view class="money_details_inner money_details_inner1" @click="toSetFee(info)" style="margin-top:20rpx;font-size: 32rpx;">
						<view class="money_details_text" style="color: #666666;">设置收费</view>
					</view>
					<view class="detail_br" style="border-left: 2rpx solid #EDEDED;position: relative;top:10rpx;heigth:60rpx;"></view>
					<view class="money_details_inner money_details_inner1" @click="toCount(info)" style="margin-top:20rpx;font-size: 32rpx;">
						<view class="money_details_text" style="color: #666666;">统计</view>
					</view>
					<view class="detail_br" style="border-left: 2rpx solid #EDEDED;position: relative;top:10rpx;heigth:60rpx;"></view>
					<view class="money_details_inner money_details_inner1" @click="toorder(info)" style="margin-top:20rpx;font-size: 32rpx;">
						<view class="money_details_text" style="color: #666666;">订单</view>
					</view>
				</view>
			</view>
			<view style="height:50rpx;"></view>
		</view>
		<image @tap="toAdd" class="add_btn" src="../../../common/img/tianjia.png" mode=""></image>
		<view style="height:100rpx;"></view>
		<view v-if="list.length==0" class="margin-top-lg text-center">
			<image src='../../../common/img/no_data.png' style="width:275rpx;height:312rpx;"></image>
		</view>
		<view v-if="list.length>0" class="text-black text-df text-center bg-white padding-sm padding-left-lg be-gray">
			{{loadingTxt}} 共({{list.length}}条记录)
		</view>
		
		
	</view>
</template>

<script>
	import uniProgress from '../../../components/uni-progress/uni-progress.vue'
	let page=1,timer=null
	export default {
		 components:{
			uniProgress
		},
		data() {
			return {
				list:[],
				loadingTxt:'加载更多',
				inputval:"",
				/* iconname:"unfold", */
			}
		},
		onShow() {
			page=1;
			this.gatdata();
		},
		methods: {
			getinputvalue: function(event) {  
				this.inputval = event.target.value  
			}, 
			searchShop(){
				page=1;
				this.gatdata();
				this.inputval="";
			},
			gatdata(){
				let that=this;
				that.http.tokenreq({
					url: 'residenialquarers/v1/list',
					data:{"pageindex":page,
					      "village":this.inputval
					}
				}).then((res) => {
					console.log("res="+JSON.stringify(res));
					let e=res.data;
					if(e.code==0 && e.success){
						let list=e.rows;
						list.forEach(item => {
							item.isshow = false;
							item.iconname="right"
						});
						that.list=list;
						page++;
					}else{
						uni.showModal({
							content:e.message,
							showCancel:false,
						})
					}
				})
			},
			getmorelist(){
				this.loadingTxt='加载中'
				let that=this;
				that.http.tokenreq({
					url: 'residenialquarers/v1/list',
					data:{"pageindex":page,
					      "village":this.inputval
					}
				}).then((res) => {
					uni.hideLoading();
					let e=res.data;
					if(e.code==0 && e.success){
						if(e.rows.length==0){
							that.loadingTxt="已经加载全部";
							return;
						}
						that.list=that.list.concat(e.rows);
						page++
					}else{
						uni.showModal({
							content:e.message,
							showCancel:false,
						})
					}
				})
			},
			//商品详情显示或隐藏
			showyyinfo(index){
				let info=this.list[index];
				if(info.iconname=="right"){
					info.iconname="unfold"
				}else{
					info.iconname="right"
				}
				info.isshow=!info.isshow;
			},
			onReachBottom() {
				//阻止重复加载
				if(timer !== null){
					clearTimeout(timer)
				}
				timer=setTimeout(()=>this.getmorelist(),500)
				// this.getMoreNews()
			},
			//新增
			toAdd(){
				uni.navigateTo({
					url: '../addCommunity/addCommunity'
				})
			},
			toDetail(guid){
				uni.navigateTo({
					/* url: '../communityDetail/communityDetail?guid='+guid */
					url:'../addCommunity/addCommunity?guid='+guid 
				})
			},
			//设置收费
			toSetFee(info){
				uni.navigateTo({
					url:'/pages/community/setFee/setFee?item='+JSON.stringify(info)
				})
			},
				
			//小区订单
			toorder(){
				uni.navigateTo({
					url: '/pages/community/order/commorder'
				})
			},
			//小区报表
			toCount(item){
				uni.navigateTo({
					url: '/pages/community/count/count?item='+JSON.stringify(item)
				})
			},
			//删除小区
			delCommunity(guid){
				let that=this;
				uni.showModal({
					title: '提示',
					content: '确定要删除该小区信息吗?',
					success: function (res) {
						if (res.confirm) {
							that.del(guid);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			del(guid){
				let that=this;
				uni.showLoading();
				that.http.tokenreq({
					url: 'residenialquarers/v1/del',
					data:{"residential_quarters_guid":guid}
				}).then((res) => {
					console.log("res="+JSON.stringify(res));
					let e=res.data;
					if(e.code==0 && e.success){
						uni.hideLoading();
						uni.showModal({
							content: e.message,
							showCancel:false,
							success: function (res) {
								if (res.confirm) {
									page=1;
									that.gatdata()
								}
							}
						});
					}else{
						uni.showModal({
							content:e.message,
							showCancel:false,
						})
					}
				})
			}
		}
	}
</script>
<style>
	.detail_br{
		height:60rpx !important;
	}
	.big_inner_two{
		margin-bottom: 0px;
	}
</style>
